<template>
  <div class="nav2">
    <NavTitle title="当日空气质量" />
    <div class="px-26px grid grid-cols-2 pt-20px pb-10px gap-y-14px">
      <div
        v-for="item in listData"
        :key="item.title"
        class="flex items-center gap-13px"
      >
        <DwImage class="w-66px h-66px" :src="item.icon" />
        <div>
          <div class="text-18px mb-5px unit">
            {{ infoData[item.prop] || 0 }}{{ item.unit }}
          </div>
          <div class="font-600">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import NavTitle from "@/components/NavTitle";
import { useImageUrl } from "@/utils";
import { jinyangTodayApi } from "@/api";

const listData = ref([
  {
    title: "实时湿度",
    icon: useImageUrl("ee.png"),
    unit: "%RH",
    prop: "humidity",
  },
  // {
  //   title: '实时温度',
  //   icon: useImageUrl('bb.png'),
  //   unit: '℃',
  //   prop: 'temperature'
  // },
  {
    title: "噪音值",
    icon: useImageUrl("uu1.png"),
    unit: "db",
    prop: "noise",
  },
  {
    title: "负氧离子",
    icon: useImageUrl("dd.png"),
    unit: "个/cm³",
    prop: "negaOxygen",
  },
  {
    title: "大气气压",
    icon: useImageUrl("cf.png"),
    unit: "Pa",
    prop: "atmosphere",
  },
  {
    title: "CO2含量",
    icon: useImageUrl("uu3.png"),
    unit: "ppm",
    prop: "windPower",
  },
  {
    title: "氧气含量",
    icon: useImageUrl("uu2.png"),
    unit: "%VOL",
    prop: "oxygen",
  },
  {
    title: "PM2.5",
    icon: useImageUrl("aa.png"),
    unit: "ug/m3",
    prop: "pm25",
  },
  {
    title: "PM10",
    icon: useImageUrl("cc.png"),
    unit: "ug/m3",
    prop: "pm10",
  },
]);

const infoData = ref({});
const getData = async () => {
  const { data } = await jinyangTodayApi();
  infoData.value = data || {};
};

getData();
</script>

<style lang="scss" scoped>
.nav2 {
  color: #fff;
  .unit {
    color: rgba(29, 189, 242, 1);
    font-family: dwTitleFont;
  }
}
:deep(.navTitle) {
  height: 40px;
  .navTitle_tit {
    padding-top: 5px;
  }
}
</style>
